import React, { Component } from "react";
import { connect } from "react-redux";
import { nanoid } from "nanoid";
import { createPerson } from "../../redux/action/person";
class Person extends Component {
  handlePerson = () => {
    const { personName, age } = this;
    if(personName.value.trim()===''||age.value.trim()==='')return alert('请填写内容')
    const personObj = {id:nanoid(),name:personName.value,age:age.value}
    this.props.addPerson(personObj)
  };
  render() {
    const { persons } = this.props;
    return (
      <div>
        <div>
        <h2>当前的count之和为{this.props.count}</h2>
          <input ref={(c) => (this.personName = c)} type="text" />
          <input ref={(c) => (this.age = c)} type="text" />
          <button onClick={this.handlePerson}>增加</button>
        </div>
        <ul>
          {persons.map((person) => {
            return <li key={person.id}>{person.name}---{person.age}</li>;
          })}
        </ul>
      </div>
    );
  }
}
export default connect((state) => ({ count: state.count,persons:state.persons}), {
  addPerson:createPerson
})(Person);
